<script lang="ts">
export default {
  name: 'Person',
  // data() {
  //   return {
  //     name: '张三',
  //     age: 18,
  //   };
  // },
  setup() {
    console.log('setup');
  
    // 直接写变量不是响应式的
    let name = 'setup中定义变量';
    let age = 20;
    let tel = '123456789';

    // 方法
    const call = () => {
      name = '改变name';
      age++;
      alert('打电话' + tel);
    };
    return {
      name,
      age,
      call, //方法也要返回
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
};
</script>

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄{{ age }}</h2>
    <h2>打电话</h2>
    <button @click="call"></button>
  </div>
</template>

<style scoped>
.person {
  color: red;
}
</style>
